<div style="padding: 5px 20px 20px" id="addBillContent">
    <form class="layui-form layui-user-from order-detail-tab" v-cloak>
        <!-- 项目新增候选人可以多选，可以不选 -->
        <!-- 订单必须要有候选人 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>项目/订单信息</strong></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开票类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="billingType" lay-filter="billingType" v-model="form.billingType" lay-verify="required" value="0" title="项目">
                                <input type="radio" name="billingType" lay-filter="billingType" v-model="form.billingType" lay-verify="required" value="1" title="订单">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6" v-if="form.billingType == 0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目</label>
                            <div class="layui-input-block">
                                <div lay-event="xm-select-project"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6" v-if="form.billingType == 1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单</label>
                            <div class="layui-input-block">
                                <div lay-event="xm-select-order"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pt-5 pb-5">
                    <!-- 候选人-->
                    <talent-modular :data="talentInfoList" :talent="talentList" ref="talentModular"></talent-modular>
                </div>
            </div>
        </div>
        <!-- 收费信息 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>收费信息</strong> <strong class="pull-right">收费总计: <span class="color-red" v-html="'¥ ' + addCommas(form.amount)">¥ 94,500</span></strong></div>
            <div class="layui-card-body">
                <div class="mb-15">
                    <!-- 收费信息-->
                    <charge-modular :data="chargeInfoList" ref="chargeModular"></charge-modular>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">首款比例</label>
                            <div class="layui-input-block">
                                <select name="firstPayment">
                                    <option value=""></option>
                                    <option value="0">10%</option>
                                    <option value="1">20%</option>
                                    <option value="2">30%</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">尾款比例</label>
                            <div class="layui-input-block">
                                <select name="lastPayment">
                                    <option value=""></option>
                                    <option value="0">10%</option>
                                    <option value="1">20%</option>
                                    <option value="2">30%</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">Invoice Type</label>
                            <div class="layui-input-inline">
                                <select name="invoiceType" v-model="form.invoiceType">
                                    <option value=""></option>
                                    <option value="0">下拉框</option>
                                    <option value="1">下拉框</option>
                                    <option value="2">下拉框</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">收费备注</label>
                            <div class="layui-input-block">
                                <textarea name="chargeNotes" v-model="form.chargeNotes" placeholder="" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传附件</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="uploadFile">上传附件</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12" v-if="fileList.length">
                        <div class="layui-form-item">
                            <label class="layui-form-label">&nbsp;</label>
                            <div class="layui-input-block">
                                <ul class="clearfix annex-list" v-for="item in fileList" :key="item.id">
                                    <li>
                                        <a href="javascript:;" class="mr-20" @click="handleShowFile(item)">
                                            <i class="fa fa-file mr-10"></i>
                                            <span class="color-blue" v-text="item.originname"></span>
                                        </a>
                                        <a href="javascript:;" @click="handleDeleteFile(item.id)"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 业绩分配 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>业绩分配</strong></div>
            <div class="layui-card-body">
                <div class="pb-5">
                    <table class="layui-table">
                        <colgroup>
                            <col width="30%">
                            <col width="35%">
                            <col width="35%">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>用户</th>
                            <th>角色</th>
                            <th class="label-required">Revenue Split</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Leo Zeng</td>
                            <td>主要顾问</td>
                            <td>
                                <div class="layui-input-inline">
                                    <input type="text" name="" placeholder="%" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" name="" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 客户信息 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>客户信息</strong></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">付款信息</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <div lay-event="xm-select-payment"></div>
                            </div>
                            <div class="layui-input-inline">
                                <button :disabled="true" class="layui-btn layui-btn-xs layui-btn-primary layui-disabled" @click="editPaymentInfo">编辑</button>
                                <a class="layui-btn layui-btn-xs layui-bg-lightblue">添加</a>
                            </div>
                            <div class="layui-input-block layui-clear pt-10" v-show="form.paymentId">
                                <!-- 发票信息 -->
                                <div class="layui-card">
                                    <div class="layui-card-header"><strong>发票信息</strong></div>
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">发票类型</div>
                                                    <div class="info" v-text="payInfo.type"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">发票抬头</div>
                                                    <div class="info">厦门乔丹发展有限公司</div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">纳税人识别号</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">税务登记地址</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">税务登记电话</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">开户银行名称</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">开户银行账号</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 快递信息 -->
                                <div class="layui-card">
                                    <div class="layui-card-header"><strong>快递信息</strong></div>
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">收件人</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">职务</div>
                                                    <div class="info">厦门乔丹发展有限公司</div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">手机</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">邮件</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">城市</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">地址</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">邮编</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">客户</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 其它信息 -->
                                <div class="layui-card">
                                    <div class="layui-card-header"><strong>其它信息</strong></div>
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">ID</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">Billing No.</div>
                                                    <div class="info">厦门乔丹发展有限公司</div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">添加者</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">添加日期</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">最近更新者</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md6">
                                                <div class="order-basic-item">
                                                    <div class="label">最近更新时间</div>
                                                    <div class="info"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内部信息 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>内部信息</strong></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">合同</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <select name="">
                                    <option value=""></option>
                                    <option value="0">下拉框</option>
                                    <option value="1">下拉框</option>
                                    <option value="2">下拉框</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <a class="layui-btn layui-btn-xs layui-bg-lightblue">搜索</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">PO</label>
                            <div class="layui-input-block">
                                <input type="text" name="PO" v-model="form.PO" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">快递单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="courierNo" v-model="form.courierNo" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">快递公司</label>
                            <div class="layui-input-block">
                                <input type="text" name="courierCompany" v-model="form.courierCompany" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">Payment Terms</label>
                            <div class="layui-input-block">
                                <select name="paymentTerms" v-model="form.paymentTerms" lay-filter="paymentTerms" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="Nett 7 Days">Nett 7 Days</option>
                                    <option value="Nett 22 Days">Nett 22 Days</option>
                                    <option value="Nett 70 Days">Nett 70 Days</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">税务发票号</label>
                            <div class="layui-input-block">
                                <input type="text" name="invoiceNo" v-model="form.invoiceNo" readonly class="layui-input layui-disabled">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">打印状态</label>
                            <div class="layui-input-block">
                                <span class="layui-badge layui-bg-orange" v-if="form.printStatus == 0">系统发票未打印</span>
                                <span class="layui-badge layui-bg-gray"  v-if="form.printStatus == 1">系统发票已打印</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款状态</label>
                            <div class="layui-input-block">
                                <span class="layui-badge layui-bg-orange" v-if="form.payStatus == 0">税务发票未收款</span>
                                <span class="layui-badge layui-bg-lightblue" v-if="form.payStatus == 1">税务发票部分收款</span>
                                <span class="layui-badge layui-bg-gray" v-if="form.payStatus == 2">税务发票已收款</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">Submit To Billing</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="submitBilling" v-model="form.submitBilling" lay-filter="submitBilling" title="是" lay-skin="primary">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit lay-filter="formDemo">立即提交</a>
            </div>
        </div>
    </form>
</div>
<!-- 候选人 -->
<script type="text/html" id="tplTalentPanel">
    <table class="layui-table">
        <colgroup>
            <col width="30%">
            <col width="35%">
            <col width="35%">
        </colgroup>
        <thead>
        <tr>
            <th>候选人</th>
            <th>预计入职时间</th>
            <th>保证期 <a class="layui-btn layui-btn-xs layui-bg-lightblue pull-right" @click="handleAddBtnClick">新增</a></th>
        </tr>
        </thead>
        <tbody>
            <slot></slot>
        </tbody>
    </table>
</script>
<script type="text/html" id="tplTalent">
    <tr>
        <td>
            <div>
                <div ref="talentSelect"></div>
            </div>
        </td>
        <td>
            <div class="layui-input-inline">
                <input type="text" name="expectedEntryTime"
                       v-model="form.expectedEntryTime"
                       lay-verify="required"
                       placeholder=""
                       autocomplete="off"
                       ref="entryTime"
                       class="layui-input">
            </div>
        </td>
        <td>
            <div class="layui-input-inline">
                <input type="text" name="guaranteePeriod" v-model="form.guaranteePeriod" readonly class="layui-input layui-disabled">
            </div>
            <a class="layui-btn layui-btn-xs layui-btn-primary pull-right" @click="handleDelete" v-if="deleteable">删除</a>
        </td>
    </tr>
</script>
<!-- 收费 -->
<script type="text/html" id="tplChargePanel">
    <table class="layui-table">
        <colgroup>
            <col width="25%">
            <col width="25%">
            <col width="25%">
            <col width="25%">
        </colgroup>
        <thead>
        <tr>
            <th>类型</th>
            <th class="label-required">收费金额</th>
            <th>支出金额</th>
            <th>供应商 <a class="layui-btn layui-btn-xs layui-bg-lightblue pull-right" @click="handleAddBtnClick">新增</a></th>
        </tr>
        </thead>
        <tbody>
            <slot></slot>
        </tbody>
    </table>
</script>
<script type="text/html" id="tplCharge">
    <tr>
        <td>
            <div>
                <div ref="chargeTypeSelect"></div>
            </div>
        </td>
        <td>
            <div class="layui-input-inline">
                <input type="text" name="incomeAmount" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </td>
        <td>
            <div class="layui-input-inline">
                <input type="text" name="expAmount" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </td>
        <td>
            <div class="layui-input-inline" style="width: 250px">
                <div ref="supplierSelect"></div>
            </div>
            <a class="layui-btn layui-btn-xs layui-btn-primary pull-right" @click="handleDelete" v-if="deleteable">删除</a>
        </td>
    </tr>
</script>
<script src="js/addBill.js"></script>
